<template>
	<view>
		<map id="map" 
		style="width: 100%; height: 250px;" 
		scale="10"
		:markers="markers"
		:longitude="longitude"
		:latitude="latitude"
		:polyline="polyline"
		>
		</map>
		<u-button type="primary" @click="huifang()" size="medium">轨迹回放</u-button>
		<view class="u-m-20">
			<u-time-line v-for="(item,index) in dataList" :key="index">
				<u-time-line-item nodeTop="4" v-if="item.status == '配送完成'">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="item.v1 == '1'">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" style="background: #cecece;" v-else>
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}-{{item.msgType}}</view>
							<view class="u-order-desc">{{item.content}}</view>
							<view class="u-order-time">{{item.times}}{{item.createUsername}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="4" v-if="item.status == '客户签收'">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="item.v1 == '1'">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="file-text" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" style="background: #cecece;" v-else>
							<!-- 此处为uView的icon组件 -->
							<u-icon name="file-text" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}-{{item.msgType}}</view>
							<view class="u-order-desc">{{item.content}}<span style="color: #007AFF;" @click="viewImage(item.v4)" v-if="item.v4">查看回单</span></view>
							<view class="u-order-time">{{item.times}}{{item.createUsername}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="4" v-if="item.status == '送达'">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="item.v1 == '1'">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" style="background: #cecece;" v-else>
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}-{{item.msgType}}</view>
							<view class="u-order-desc">{{item.content}}<span style="color: #007AFF;" @click="viewImage(item.v4)" v-if="item.v4">查看签名</span></view>
							<view class="u-order-time">{{item.times}}{{item.createUsername}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="4" v-if="item.status == '离场发运'">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;" v-if="item.v1 == '1'">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
						<view class="u-node" style="background: #cecece;" v-else>
							<!-- 此处为uView的icon组件 -->
							<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}-{{item.msgType}}</view>
							<view class="u-order-desc">{{item.content}}</view>
							<view class="u-order-time">{{item.times}}{{item.createUsername}}</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item nodeTop="4" v-if="item.status === '到仓装车'">
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}-{{item.msgType}}</view>
							<view class="u-order-desc">{{item.content}}</view>
							<view class="u-order-time">{{item.times}}{{item.createUsername}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>
<script>
	import config from '../../../config.js'
	import bmap from '../../../static/js/bmap-wx.js'
	export default {
		data() {
			return {
				dataList:[],
				receiptList:[],
				BMap:{},
				markers:[],
				longitude:'',
				latitude:'',
				flongitude:'',
				flatitude:'',
				
				paths:[],
				mapContext:{},
				polyline:[],
			}
		},
		onLoad(open) {
			this.$http.post('/rest/transportCar/transportMsg',{
			},{
				params: {
					dispatchNumber:open.dispatchNumber
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				this.dataList = res.data.data
			})
			
			// 新建百度地图对象 
			//#ifdef MP-WEIXIN
			this.BMap = new bmap.BMapWX({ 
				ak: 'ESWpVgDaBgDk7KWsgkUkBE6kzAN0BKTa' 
			});
			var that = this
			this.$http.post('/rest/transportCar/transportReceipt',{
			},{
				params: {
					dispatchNumber:open.dispatchNumber
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				this.receiptList = res.data.data
				if(res.data.data.length > 0){
					//标记发货地
					if(typeof res.data.data[0].setLocation != 'undefined' && res.data.data[0].setLocation != null && res.data.data[0].setLocation != ''){
						let obj = {}
						obj.id = that.receiptList[0].setLocationid
						obj.latitude = res.data.data[0].latitude
						obj.longitude = res.data.data[0].longitude
						that.flatitude = res.data.data[0].latitude
						that.flongitude = res.data.data[0].longitude
						that.latitude = that.flatitude
						that.longitude = that.flongitude
						obj.iconPath = 'https://z3.ax1x.com/2021/09/11/hzkYtO.png'
						obj.width = 30
						obj.height = 30
						let objq = {}
						objq.content = '发：'+that.receiptList[0].setUnit
						objq.fontSize = 12
						objq.borderRadius = 5
						objq.padding = 4
						objq.display = 'BYCLICK'
						obj.callout = objq
						that.markers.push(obj)
					}
					
					//标记收货地
					that.receiptList.forEach((item,index) => {
						this.$http.post('/rest/address/getByid',{
						},{
							params: {
								id: that.receiptList[index].getLocationid
							},
							header: {
								'Authorization' :uni.getStorageSync('token'),
							}
						}).then(res => {
							let obj = {}
							obj.id = that.receiptList[index].getLocationid
							obj.latitude = res.data.data.latitude
							obj.longitude = res.data.data.longitude
							obj.iconPath = 'https://z3.ax1x.com/2021/09/11/hzkdcd.png'
							obj.width = 30
							obj.height = 30
							let objq = {}
							objq.content = '收：'+that.receiptList[index].getUnit
							objq.fontSize = 12
							objq.borderRadius = 5
							objq.padding = 4
							objq.display = 'BYCLICK'
							obj.callout = objq
							that.markers.push(obj)
						})
					})
					
					//获取三天的轨迹
					for(let item1 of that.dataList){
						if(item1.status == '离场发运'){
							console.log("获取近三天的轨迹")
							var str = item1.times
							var new_str = str.replace(/:/g,'-')
							new_str = new_str.replace(/ /g,'-')
							var arr = new_str.split("-")
							var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]))
							let sunix = datum.getTime()/1000
							let junix = sunix+86399
							let carlatitude = 0
							let carlongitude = 0
							let carunix = 0
							uni.request({
								method:"GET",
								url: 'https://yingyan.baidu.com/api/v3/track/gettrack',
								data:{
									ak: 'wYkHbMlxX7unRpCiRO3LzAr6DSVrdcGK',
									service_id: 229331,
									entity_name: that.receiptList[0].carnumber+'-'+that.receiptList[0].dispatchNumber,
									start_time: sunix,
									end_time: junix,
									is_processed:1,
									process_option: 'need_mapmatch=1',
									coord_type_output: 'gcj02',
									page_index: 1,
									page_size: 2880
								},
								header:{
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.status == 0){
										console.log(res.data.points.length)
										if(res.data.points.length > 0){
											carlatitude = res.data.end_point.latitude
											carlongitude = res.data.end_point.longitude
											carunix = res.data.end_point.loc_time
											for(let item of res.data.points){
												let obj = {}
												obj.longitude = item.longitude
												obj.latitude = item.latitude
												that.paths.push(obj)
											}
										} 
									} else {
										that.latitude = that.flatitude
										that.longitude = that.flongitude
									}
								}
							})
							sunix = junix
							junix = junix+86399
							uni.request({
								method:"GET",
								url: 'https://yingyan.baidu.com/api/v3/track/gettrack',
								data:{
									ak: 'wYkHbMlxX7unRpCiRO3LzAr6DSVrdcGK',
									service_id: 229331,
									entity_name: that.receiptList[0].carnumber+'-'+that.receiptList[0].dispatchNumber,
									start_time: sunix,
									end_time: junix,
									is_processed:1,
									process_option: 'need_mapmatch=1',
									coord_type_output: 'gcj02',
									page_index: 1,
									page_size: 2880
								},
								header:{
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.status == 0){
										console.log(res.data.points.length)
										if(res.data.points.length > 0){
											carlatitude = res.data.end_point.latitude
											carlongitude = res.data.end_point.longitude
											carunix = res.data.end_point.loc_time
											for(let item of res.data.points){
												let obj = {}
												obj.longitude = item.longitude
												obj.latitude = item.latitude
												that.paths.push(obj)
											}
										} 
									} else {
										that.latitude = that.flatitude
										that.longitude = that.flongitude
									}
								}
							})
							sunix = junix
							junix = junix+86399
							uni.request({
								method:"GET",
								url: 'https://yingyan.baidu.com/api/v3/track/gettrack',
								data:{
									ak: 'wYkHbMlxX7unRpCiRO3LzAr6DSVrdcGK',
									service_id: 229331,
									entity_name: that.receiptList[0].carnumber+'-'+that.receiptList[0].dispatchNumber,
									start_time: sunix,
									end_time: junix,
									is_processed:1,
									process_option: 'need_mapmatch=1',
									coord_type_output: 'gcj02',
									page_index: 1,
									page_size: 2880
								},
								header:{
									'Content-Type':'application/x-www-form-urlencoded'
								},
								success: (res) => {
									if(res.data.status == 0){
										console.log(res.data.points.length)
										if(res.data.points.length > 0){
											carlatitude = res.data.end_point.latitude
											carlongitude = res.data.end_point.longitude
											carunix = res.data.end_point.loc_time
											for(let item of res.data.points){
												let obj = {}
												obj.longitude = item.longitude
												obj.latitude = item.latitude
												that.paths.push(obj)
											}
										} 
									} else {
										that.latitude = that.flatitude
										that.longitude = that.flongitude
									}
								}
							})
							setTimeout(() => {
								let obj = {}
								obj.id = 0
								obj.latitude = carlatitude
								obj.longitude = carlongitude
								obj.iconPath = 'https://z3.ax1x.com/2021/09/13/4iCkQg.png'
								obj.width = 30
								obj.height = 30
								let objq = {}
								var unixTimestamp = new Date(carunix*1000);
								var commonTime = unixTimestamp.toLocaleString()
								objq.content = that.receiptList[0].carnumber+'，最后时间:'+commonTime
								objq.fontSize = 12
								objq.borderRadius = 5
								objq.padding = 4
								objq.display = 'BYCLICK'
								obj.callout = objq
								that.markers.push(obj)
								that.latitude = carlatitude
								that.longitude = carlongitude
								
								let obj2 = {}
								obj2.points = that.paths
								obj2.color = '#2979ff'
								obj2.width = 5
								obj2.arrowLine = true
								obj2.borderColor = '#000000'
								obj2.borderWidth = 1
								that.polyline.push(obj2)
								
								that.mapContext = wx.createMapContext('map')
								that.mapContext.moveAlong({
									markerId: 0,
									path: that.paths,
									duration: 15000,
									success: (res) => {
										console.log('轨迹回放成功')
									},
									fail: (res) => {
										console.log('轨迹回放失败')
									}
								})
							}, 1200)
						}
					}
				}
			})
			//#endif
		},
		methods: {
			viewImage(fileId) {
				let arr = []
				let img = config.root + 'system/previewa/' + fileId
				arr.push(img)
				uni.previewImage({
					urls: arr,
				});
			},
			huifang(){
				//#ifdef MP-WEIXIN
				this.mapContext.moveAlong({
					markerId: 0,
					path: this.paths,
					duration: 15000,
					success: (res) => {
						console.log('轨迹回放成功')
					},
					fail: (res) => {
						uni.showToast({
							title: "轨迹回放失败",
							icon: 'none'
						})
					}
				})
				//#endif
			}
		}
	}
</script>

<style>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>
